<template>
  <div>
    <list title='3ds'></list>
    <!-- <detail-dialog :visible="false"></detail-dialog> -->
  </div>
</template>
<script>
import detailDialog from '~/components/detailDialog'
import list from '~/components/list'
export default {
  layout: 'common',
  head: {
    title: '列表页'
  },
  components: {
    detailDialog,
    list
  },
  data () {
    return {
      currentMask: '',
      swiperOption: {
        setWrapperSize: true,
        autoplay: true,
        pagination: {
          el: '.swiper-pagination'
        },
        loop: true,
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        }
      }
    }
  },
  watch: {

  },
  methods: {
    callback () {},
    showMask (type) {
      if (this.currentMask === type) return true
    },
    slideShadow (type, ele) {
      if (type === 'enter') {
        this.currentMask = ele
      } else {
        this.currentMask = ''
      }
    },
    goDetailPage () {
      console.log(123123123)
    },
    goListPage (type) {
      console.log(type)
    }
  }
}
</script>
<style lang="scss" scoped>
.index {
  img {
      width: 100%;
    }
  &-banner {

    width: 100%;
    height: auto;
    .swiper-button-next{
      height: 61px;
      width: 38px;
      opacity: 0.7;
      background:url(~/static/image/themes.gif) no-repeat right top;
    }
    .swiper-button-prev{
      height: 61px;
      width: 38px;
      opacity: 0.7;
      background:url(~/static/image/themes.gif) no-repeat left top;
    }
  }
  &-row {
    min-height: 300px;

    padding:  50px 0 ;
    &-content {
      max-width: 1200px;
      margin:0 auto;
      &-titlebox {
         margin-bottom: 40px;
      }
      &-more {
        margin-left:auto;
        font-size:16px;
        padding: 10px 20px;
        color:#333;
        border:2px solid #333;
        &:hover {
          cursor: pointer;
          border-color:#e91e63;
          background: #e91e63;
          color: #fff;
        }
      }
      &-title {
        margin-left:auto;
        font-size: 40px;
        color: #e91e63;
        margin-bottom: 40px;
        text-align:center;
        letter-spacing: 1px;
        &.page {
          cursor: pointer;
          margin-bottom: 0;
        }
      }
      &-list {
        img {
          &:hover {
            cursor: pointer;
          }
        }
        &-mask {
          position: absolute;
          width: 100%;
          height: 100%;
          background: rgba(0,0,0,0.6);
          top:0;
          cursor: pointer;
          transition: all 3s;
          color:#fff;
          padding: 20px;
        }
        &-title {
          font-size :30px;
          padding: 10px;
        }
        &-introduce {
          font-size:14px;
          line-height: 1.25em;
        }
      }
    }
  }

}
</style>
<style>

</style>

